<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>全部消息</title>
 <!-- 引入Bootstrap的样式表 -->
 <script src="js/jquery-1.11.0.min.js"></script>
 <link rel="stylesheet" href="css/BeatPicker.min.css"/>
 <script src="js/BeatPicker.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <style>
    /*与全部消息一样开始*/
   *{
   	padding: 0;
   	margin: 0;
   }
   li{
      list-style: none;
   }
   .con{
   	background-color: #fff;
   	padding: 0 20px;
   }
   .con p{
   	display: inline-block;
   	padding-left: 10px;
   	line-height: 50px;
   	margin: 0;
   }
   .con-header{
   	width: 100%;
   	border-bottom: 1px solid #e5e5e5;
   }
   .navi .nav-tabs{
   	padding-top: 10px;
   }
   .navi .nav-tabs li{
      margin-right: 2px;

   }
   .navi .nav-tabs li a{
   	background-color: #f9f9f9;
   	color: #999;
   	line-height: 15px;
      margin: 0;
      border: 1px solid #c5d0dc;
      border-bottom: 0;
   }
   .navi .nav-tabs{
      border-bottom: 0;
   }
   .navi .nav-tabs li a:hover{
   	color: #4c8fbd;
   }
   .navi .nav-tabs li a:focus{
   	background-color: #fff;
      border-left: 1px solid #c5d0dc;
      border-right: 1px solid #c5d0dc;
   }
   .navi .nav-tabs .active{
   	border-top:2px solid #1675cc;
      margin-top: -1px;
   }
   .navi .nav-tabs .active a{
   	background-color: #fff;
   }
   .tab-content{
      border: 1px solid #ccc;
   }
   .navi .li2 button{
      display: none;
      outline: none;
   }
   .navi .li2 div{
      float: left;
      margin: 0 10px;
   }
   .navi .li2 input{
      border: 1px solid #ccc;
      line-height: 25px;
      outline: none;
      padding-left: 10px;
      margin-top: 11px;
   }
   .navi .tab-pane p{
      display: inline-block;
      float: left;
   }
   .ss button{
      line-height: 25px;
      border:none;
      width: 60px;
      font-size: 13px;
      margin-top: 11px;
      outline: none;
   }
   .ss i{
      padding-right: 3px;
   }
   .ss .cz{
      background-color: #3598dc;
      color: #fff;
   }
   .ss .chz{
      background-color: #e1e5ec;
      color: #666;
   }
   .bform,.cform{
      width: 100%;
   }
   .bform table,.cform table{
      width:98%;
      margin-bottom: 100px;
      margin: 0 1%;
   }
   .bform table p,.cform table p{
      display: block;
      line-height: 30px;
   }
   .bform table th,.cform table th{
      line-height: 30px;
   }
   .bform table i,.cform table i{
      line-height: 30px;
   }
   .bform table th,.cform table th{
      border: 1px solid #ddd;
      color: #34495e;
      font-size: 13px;
      font-weight: 200;
   }
   .bform table th input{
      background-color: #fff;
   }
   .bform table th i,.cform table th i{
      float: right;
      color: #9aa4af;
      padding-right: 10px;
   }
   .bform table th:first-child{
      width: 50px;
      text-align: center;
   }
   .bform table th:nth-child(2){
      width: 78%;
   }
   .bform table td:first-child{
      text-align: center;
   }
   .bform table td,.cform table td{
      padding-left: 10px;
      line-height: 40px;
   }
   .bform table tr:hover td,.cform table tr:hover td{
      background-color: #e1e5ec;
   }
   .bform table .tr3:hover td,.cform table .tr3:hover td{
      background-color: #fff;
   }
   .tr3 button{
      outline: none;
      border: none;
      height: 30px;
      width: 50px;
      line-height: 30px;
      margin: 10px 3px;
   }
   .yd{
      background-color: #3598dc;
      color: #fff;
   }
   .wd{
      background-color: #e1e5ec;
      color: #666;
   }
   .del{
      background-color: #e7505a;
      color: #fff;
   }
   /*与全部消息一样结束*/
 </style>
</head>
<body>
<div class="con">
	<div class="con-header">
		<i class="fa fa-envelope-o"></i><p>全部消息</p>
	</div>
	<div class="navi">
		<ul class="nav nav-tabs">
		 <li class="active"><a href="#tab1" data-toggle="tab">通知消息</a></li>
		 <li><a href="#tab2" data-toggle="tab">交易消息</a></li>
		 <li><a href="#tab3" data-toggle="tab">活动消息</a></li>
		 <li><a href="#tab4" data-toggle="tab">我的资产</a></li>
		</ul>
		<div class="tab-content">
		 <div class="tab-pane active " id="tab1">
            <p>发送日期</p>
            <div class="li2">
               <input type="text" data-beatpicker="true" placeholder ="开始日期" data-beatpicker-position="['*','*']"/>
               <input type="text" data-beatpicker="true" placeholder ="结束日期" data-beatpicker-position="['*','*']"/>
            </div>   
            <div class="ss">
               <p>标题</p>
               <input type="text" placeholder="标题">
               <button class="cz"><i class="fa fa-search"></i>查找</button>
               <button class="chz"><i class="fa fa-times"></i>重置</button>
            </div>
            <div class="bform">
               <table>
                  <tr>
                     <th><input type="checkbox"></input></th>
                     <th><p>标题</p><i class="fa fa-sort-amount-asc"></i></th>
                     <th><p>时间</p><i class="fa fa-long-arrow-down"></i><i class="fa fa-long-arrow-up" style="padding-right: 0"></i></th>
                     <th><p>操作</p></th>
                  </tr>
                  <tr>
                     <td><input type="checkbox"></input></td>
                     <td>fcrfr</td>
                     <td>vvg</td>
                     <td>vgfgf</td>
                  </tr>
                  <tr>
                     <td><input type="checkbox"></input></td>
                     <td>fcrfr</td>
                     <td>vvg</td>
                     <td>vgfgf</td>
                  </tr>
                  <tr>
                     <td><input type="checkbox"></input></td>
                     <td>fcrfr</td>
                     <td>vvg</td>
                     <td>vgfgf</td>
                  </tr>
                  <tr class="tr3">
                     <td><input type="checkbox"></input></td>
                     <td>
                        <button class="yd">已读</button>
                        <button class="wd">未读</button>
                        <button class="del">删除</button>
                     </td>
                  </tr>
               </table>
            </div>
       </div>
		 <div class="tab-pane" id="tab2">
            <p>发送日期</p>
            <div class="li2">
               <input type="text" data-beatpicker="true" placeholder ="开始日期" data-beatpicker-position="['*','*']"/>
               <input type="text" data-beatpicker="true" placeholder ="结束日期" data-beatpicker-position="['*','*']"/>
            </div>   
            <div class="ss">
               <p>标题</p>
               <input type="text" placeholder="标题">
               <button class="cz"><i class="fa fa-search"></i>查找</button>
               <button class="chz"><i class="fa fa-times"></i>重置</button>
            </div>
            <div class="bform">
               <table>
                  <tr>
                     <th><input type="checkbox"></input></th>
                     <th><p>标题</p><i class="fa fa-sort-amount-asc"></i></th>
                     <th><p>时间</p><i class="fa fa-long-arrow-down"></i><i class="fa fa-long-arrow-up" style="padding-right: 0"></i></th>
                     <th><p>操作</p></th>
                  </tr>
                  <tr>
                     <td><input type="checkbox"></input></td>
                     <td>fcrfr</td>
                     <td>vvg</td>
                     <td>vgfgf</td>
                  </tr>
                  <tr>
                     <td><input type="checkbox"></input></td>
                     <td>fcrfr</td>
                     <td>vvg</td>
                     <td>vgfgf</td>
                  </tr>
                  <tr class="tr3">
                     <td><input type="checkbox"></input></td>
                     <td>
                        <button class="yd">已读</button>
                        <button class="wd">未读</button>
                        <button class="del">删除</button>
                     </td>
                  </tr>
               </table>
            </div>    
       </div>
		 <div class="tab-pane" id="tab3">
            <p>发送日期</p>
            <div class="li2">
               <input type="text" data-beatpicker="true" placeholder ="开始日期" data-beatpicker-position="['*','*']"/>
               <input type="text" data-beatpicker="true" placeholder ="结束日期" data-beatpicker-position="['*','*']"/>
            </div>   
            <div class="ss">
               <p>标题</p>
               <input type="text" placeholder="标题">
               <button class="cz"><i class="fa fa-search"></i>查找</button>
               <button class="chz"><i class="fa fa-times"></i>重置</button>
            </div>
            <div class="bform">
               <table>
                  <tr>
                     <th><input type="checkbox"></input></th>
                     <th><p>标题</p><i class="fa fa-sort-amount-asc"></i></th>
                     <th><p>时间</p><i class="fa fa-long-arrow-down"></i><i class="fa fa-long-arrow-up" style="padding-right: 0"></i></th>
                     <th><p>操作</p></th>
                  </tr>
                  <tr class="tr3">
                     <td><input type="checkbox"></input></td>
                     <td>
                        <button class="yd">已读</button>
                        <button class="wd">未读</button>
                        <button class="del">删除</button>
                     </td>
                  </tr>
               </table>
            </div>    
       </div>
		 <div class="tab-pane" id="tab4">
         <p>发送日期</p>
            <div class="li2">
               <input type="text" data-beatpicker="true" placeholder ="开始日期" data-beatpicker-position="['*','*']"/>
               <input type="text" data-beatpicker="true" placeholder ="结束日期" data-beatpicker-position="['*','*']"/>
            </div>   
            <div class="ss">
               <p>标题</p>
               <input type="text" placeholder="标题">
               <button class="cz"><i class="fa fa-search"></i>查找</button>
               <button class="chz"><i class="fa fa-times"></i>重置</button>
            </div>
            <div class="bform">
               <table>
                  <tr>
                     <th><input type="checkbox"></input></th>
                     <th><p>标题</p><i class="fa fa-sort-amount-asc"></i></th>
                     <th><p>时间</p><i class="fa fa-long-arrow-down"></i><i class="fa fa-long-arrow-up" style="padding-right: 0"></i></th>
                     <th><p>操作</p></th>
                  </tr>
                  <tr class="tr3">
                     <td><input type="checkbox"></input></td>
                     <td>
                        <button class="yd">已读</button>
                        <button class="wd">未读</button>
                        <button class="del">删除</button>
                     </td>
                  </tr>
               </table>
            </div>    
       </div>
	</div>
</div>
<!-- 引入Bootstrap的js文件 -->
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>